<template>
  <div
    style="background:#f3f4f5"
    class="personal"
  >
    <div class="banner">
      <sui-modal-header
        style="padding:0!important;position: absolute;z-index: 10;width:100%"
        v-if="!header.open"
      >
        <div class="ui icon input modal-search-container">
          <button
            class="ui icon button modal-search-button circular"
            style="left: 0em;margin-left: 5px;"
            @click="$router.go(-1)"
          >
            <i class="arrow left icon"></i>
          </button>
          <sui-dropdown
            pointing="top right"
            id="search-set"
            class="icon modal-search-button circular"
            icon="ellipsis vertical"
            button
            style="margin-right: 5px;"
          >
            <sui-dropdown-menu>
              <sui-dropdown-item>New</sui-dropdown-item>
              <sui-dropdown-item>Open... <span class="description">ctrl + o</span></sui-dropdown-item>
              <sui-dropdown-item>Save as... <span class="description">ctrl + s</span></sui-dropdown-item>
              <sui-dropdown-item>Rename <span class="description">ctrl + r</span></sui-dropdown-item>
              <sui-dropdown-item>Make a copy</sui-dropdown-item>
              <sui-dropdown-item>
                <sui-icon name="folder" />Move to folder</sui-dropdown-item>
              <sui-dropdown-item>
                <sui-icon name="trash" />Move to trash</sui-dropdown-item>
              <sui-dropdown-divider />
              <sui-dropdown-item>Download as...</sui-dropdown-item>
            </sui-dropdown-menu>
          </sui-dropdown>
        </div>
      </sui-modal-header>
      <div class="profile-canopy profile-canopy-size">
        <div class="profile-canopy-inner">
          <div
            class="profile-canopy-header"
            style="margin-top: 0px;"
          >
            <div class="profile-canopy-container ui container">
              <div
                class="profile-canopy-card i-mobile-bg"
                style="height:100%"
              >
                <sui-card style="width:100%;height:100%">
                  <sui-card-content
                    :style="{backgroundImage:  'url('+image('background',img)+')'}"
                    style="background-position: center;background-size: 180%;"
                  >
                  </sui-card-content>
                  <sui-card-content style="display:flex;justify-content: space-between;height: 40px;">
                    <sui-image
                      :src="image('avator',`${baseUrl}elliot.jpg`)"
                      class="right floated"
                      circular
                      style="cursor:pointer"
                    />
                    <sui-card-header class="profile-canopy-card-info">
                      <a class="edit-mobile item">
                        <button
                          type="button"
                          class="ui item button edit"
                        >编辑个人信息</button>
                      </a>
                    </sui-card-header>
                  </sui-card-content>
                  <sui-card-content style="padding:1em;text-align: left;border: none;padding-top: 0;padding-bottom: 0;height: 35px;">
                    <sui-card-header>
                      Lourd
                    </sui-card-header>
                    <sui-card-meta>@Lourd70330729</sui-card-meta>
                  </sui-card-content>
                  <sui-card-content style="text-align: left;border: none;height: 40px;">
                    <sui-card-description style="padding:0.5em 1em;color:#14171a;">
                      中国人でプログラマーです、日本語が話せます、日本に行きたい
                    </sui-card-description>
                  </sui-card-content>
                  <sui-card-content style="border-top:none;color:#657786;height: 35px;">
                    <sui-list style="padding:1em;text-align: left;">
                      <!-- As components -->
                      <sui-list-item>
                        <sui-list-icon name="marker" />
                        <sui-list-content>Semantic UI</sui-list-content>
                      </sui-list-item>
                    </sui-list>
                  </sui-card-content>
                </sui-card>
              </div>
              <div class="profile-canopy-avatar i-tablet-bg">
                <div
                  class="profile-canopy-image"
                  style="
                  cursor:pointer;
                  position: relative;
                  overflow: hidden;"
                >
                  <sui-image
                    :src="image('avator',`${baseUrl}elliot.jpg`)"
                    class="right floated profile-canopy-image-re"
                    size="mini"
                    circular
                    style="margin-left: 0em;height: auto; width: 100%;"
                  />
                  <div
                    class="profile-canopy-image-edit"
                    :style="{display:authentication.edit?'block':'none'}"
                  >
                    <sui-icon
                      class="edit icon state-edit"
                      name="edit outline"
                      style="top:35%"
                      :style="{display:authentication.edit?'block':'none'}"
                      @click.native="alter('avator',true),modalToggle('avator')"
                    />
                  </div>
                </div>
              </div>
            </div>
            <zui-croppa
              :style="{display:!status[1].status?'none':'block'}"
              class="profile-canopy-bg i-tablet-bg"
              :width="1903"
              :height="400"
              ref="background"
            ></zui-croppa>
            <div
              class="profile-canopy-bg i-tablet-bg"
              :class="{'profile-canopy-bg-hover':authentication.edit}"
              style="background-size:auto;"
              :style="{backgroundImage:  'url('+image('background',img)+')',display:device.isMobile||status[1].status?'none':'flex'}"
            >
              <ZuiAlterIcon
                content="更改你的横幅"
                :style="{display:authentication.edit?'block':'none'}"
                @click.native="alter('background',true)"
              ></ZuiAlterIcon>
            </div>
          </div>
          <div class="ui attached menu profile-canopy-navbar">
            <div class="ui container adaptive-bar">
              <a
                class="edit-tablet item"
                v-for="n in 6"
                :key="n"
              >
              </a>

              <a
                class="item"
                :class="isActive(item)?'active':''"
                v-for="item in menu.items"
                @click="select(item),shift(`/personal/${item.key}`)"
                :key="item.key"
              >
                <i
                  class="icon"
                  :class="item.icon"
                ></i>{{item.name}}
              </a>
              <div class="right item">
                <div
                  v-for="s in status"
                  :style="{display:!s.focus?'none':'block'}"
                >
                  <button
                    type="button"
                    class="ui item button edit"
                    style="float: left;padding: 5px 16px;margin-right:14px;"
                    @click="handleBackgroundImage"
                    :style="{display:s.focus&&s.name=='background'?'block':'none'}"
                  >选择图片</button>
                  <button
                    type="button"
                    class="ui item button edit"
                    style="float: left;padding: 5px 16px;margin-right:14px;"
                    @click="alter(s.name,true)"
                  >应用{{s.content}}</button>
                  <button
                    type="button"
                    class="ui item button edit"
                    style="margin-right:14px;padding: 5px 16px;"
                    @click="alter(s.name,false)"
                  >取消</button>
                </div>
                <button
                  type="button"
                  class="ui item button edit"
                  @click="edit()"
                >{{authentication.edit?"确认保存":"编辑个人信息"}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ui container layout-content"
      style="margin-top:49px;background:#f3f4f5"
    >
      <div
        class="ui stackable grid"
        style="margin:0"
      >

        <div
          class="column sixteen wide computer sixteen wide mobile"
          style="backgournd-color:	#FF6A6A"
        >
          <div class="ui stackable grid">
            <div class="column sixteen wide computer sixteen wide mobile">
              <div class="ui stackable grid">
                <div class="column four wide computer four wide tablet only print hidden">
                  <sui-card
                    class="state"
                    :class="{'card-hover':authentication.edit}"
                  >
                    <sui-card-content>
                      <sui-icon
                        class="edit icon state-edit"
                        name="edit outline"
                        :style="{display:authentication.edit?'block':'none'}"
                        @click.native="alter('info',true),modalToggle('info')"
                      />
                      <sui-card-header>
                        {{authentication.user.user.username}}
                      </sui-card-header>
                      <sui-card-meta>@{{authentication.user.username}}</sui-card-meta>
                    </sui-card-content>
                    <sui-card-description style="padding:0.5em 1em;color:#14171a;">
                      {{authentication.user.user.privacy.description}}
                    </sui-card-description>
                    <sui-card-content style="border-top:none;color:#657786">
                      <sui-list>
                        <!-- As components -->
                        <sui-list-item>
                          <sui-list-icon name="marker" />
                          <sui-list-content> {{authentication.user.user.privacy.location}}</sui-list-content>
                        </sui-list-item>
                        <!-- As Prop -->
                        <sui-list-item
                          icon="calendar alternate"
                          content="日期分析"
                        />
                        <!-- Both -->
                        <sui-list-item icon="bolt">
                          <sui-list-content>
                            {{authentication.user.user.privacy.createdAt}}
                          </sui-list-content>
                        </sui-list-item>
                      </sui-list>
                    </sui-card-content>
                  </sui-card>
                </div>
                <div
                  class="column twelve wide computer twelve wide tablet sixteen wide mobile"
                  id="search-list-layout"
                >
                  <div
                    class="ui segment raised content"
                    id="content"
                  >
                    <transition
                      mode="out-in"
                      enter-active-class="fadeIn"
                      leave-active-class="fadeOut"
                      appear=""
                    >
                      <router-view class="animated"></router-view>
                    </transition>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <sui-modal v-model="modal.open">
      <sui-modal-header>{{modal.name=="avator"?'上传头像':'编辑个人信息'}}</sui-modal-header>
      <sui-modal-content
        image
        v-if="modal.name=='avator'"
      >
        <zui-croppa
          :width="300"
          :height="300"
          ref="avator"
        ></zui-croppa>
        <sui-modal-description style="margin-left: 14px;">
          <sui-header>操作</sui-header>
          <div
            is="sui-button-group"
            size="medium"
          >
            <sui-button positive>选择图片</sui-button>
            <sui-button-or />
            <sui-button>删除图片</sui-button>
          </div>
          <sui-header>缩放</sui-header>
          <div
            is="sui-button-group"
            size="medium"
          >
            <sui-button
              positive
              @click="$refs.avator.croppa.zoomIn()"
            >放大</sui-button>
            <sui-button-or />
            <sui-button @click="$refs.avator.croppa.zoomOut()">缩小</sui-button>
          </div>
          <sui-header>旋转</sui-header>
          <div
            is="sui-button-group"
            size="medium"
            style="margin-right:5px;margin-bottom:5px"
          >
            <sui-button
              positive
              @click="$refs.avator.croppa.rotate()"
            >转90度</sui-button>
            <sui-button-or />
            <sui-button @click="$refs.avator.croppa.rotate(-1)">转-90度</sui-button>
          </div>
          <div
            is="sui-button-group"
            size="medium"
          >
            <sui-button
              positive
              @click="$refs.avator.croppa.flipX()"
            >水平翻转</sui-button>
            <sui-button-or />
            <sui-button @click="$refs.avator.croppa.flipY()">垂直翻转</sui-button>
          </div>
        </sui-modal-description>
      </sui-modal-content>
      <sui-modal-content v-else>
        <sui-modal-description>
          <sui-form>
            <sui-form-field>
              <label>用户名</label>
              <input
                placeholder="First Name"
                type="text"
                v-model="privacyName"
              >
            </sui-form-field>
            <sui-form-field>
              <label>个性签名</label>
              <textarea
                rows="2"
                placeholder="First Name"
                v-model="privacyDescription"
              ></textarea>
            </sui-form-field>
            <sui-form-field>
              <label>出生日期</label>
              <v-date-picker
                v-model='privacyBirthday'
                is-expanded
                :formats='modal.formats'
              >
                <div
                  class="ui action input"
                  slot-scope='{ inputValue, updateValue }'
                >
                  <input
                    type='text'
                    icon='calendar'
                    :value='inputValue'
                    :placeholder='inputState.message'
                    @change.native='updateValue($event.target.value)'
                  >
                  </input>
                  <div
                    @click='privacyBirthday = null'
                    class="ui button"
                  >Clear</div>
                </div>
              </v-date-picker>
            </sui-form-field>
            <sui-form-field>
              <label>所在国家</label>
              <ZuiCitySelector
                :city="privacyLoaction"
                v-on:onSelectCity="onSelectCity"
              ></ZuiCitySelector>
            </sui-form-field>
          </sui-form>
        </sui-modal-description>
      </sui-modal-content>
      <sui-modal-actions>
        <sui-button
          basic
          content="编辑详细信息"
          style="float: left;"
        />
        <sui-button
          negative
          @click.native="handleAvatorImage('cancel')"
        >
          取消
        </sui-button>
        <sui-button
          positive
          @click.native="handleAvatorImage('download')"
        >
          确定
        </sui-button>
        </sui-button>
      </sui-modal-actions>
    </sui-modal>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
import { createHelpers } from "vuex-map-fields";
import router from "@/mixins/router";
import base64 from "@/mixins/base64";
import resize from "@/mixins/resize";
import ZuiAlterIcon from "../../components/ZuiAlterIcon.vue";
import ZuiCitySelector from "../../components/ZuiCitySelector.vue";
import ZuiCroppa from "../../components/ZuiCroppa.vue";
// `auhenticationModule` is the name of the Vuex module.
const { mapFields } = createHelpers({
  getterType: "authentication/getField",
  mutationType: "authentication/updateField"
});
export default {
  name: "personal",
  mixins: [router, base64, resize],
  components: { ZuiAlterIcon, ZuiCroppa, ZuiCitySelector },
  data() {
    return {
      modal: {
        name: "",
        open: false,
        formats: {
          title: "MMMM YYYY",
          weekdays: "W",
          navMonths: "MMM",
          input: ["YYYY-MM-DD", "YYYY-MM-DD", "YYYY/MM/DD"], // Only for `v-date-picker`
          dayPopover: "YYYY-MM-DD", // Only for `v-date-picker`
          data: ["YYYY-MM-DD", "YYYY-MM-DD", "YYYY/MM/DD"] // For attribute dates
        }
      },
      status: [
        {
          focus: false,
          name: "avator",
          status: false,
          content: "图片"
        },
        {
          focus: false,
          name: "background",
          status: false,
          content: "背景"
        },
        {
          focus: false,
          name: "info",
          status: false,
          content: "个人信息"
        }
      ],
      baseUrl: process.env.BASE_URL,
      img: require("@/assets/images/elliot.jpg"),
      menu: {
        active: "follow",
        items: [
          {
            key: "follow",
            name: "正关注",
            icon: "grid layout"
          },
          {
            key: "receive",
            name: "关注者",
            icon: "mail layout"
          }
        ]
      }
    };
  },
  beforeMount() {
    const { body } = document;
    const WIDH = 600;
    const RATIO = 3;
    const handler = () => {
      if (!document.hidden) {
        let rect = body.getBoundingClientRect();
        let isMobile = rect.width - RATIO < WIDH;
        this.toggleDevice(isMobile ? "mobile" : "other");
      }
    };
    this.initResize(handler);
  },
  destroyed() {
    const { body } = document;
    const WIDH = 600;
    const RATIO = 3;
    const handler = () => {
      if (!document.hidden) {
        let rect = body.getBoundingClientRect();
        let isMobile = rect.width - RATIO < WIDH;
        this.toggleDevice(isMobile ? "mobile" : "other");
      }
    };
    this.initResize(handler);
  },
  computed: {
    ...mapGetters([
      "header",
      "mobileNavigationBar",
      "authentication",
      "device"
    ]),
    inputState() {
      if (!this.selectedValue) {
        return {
          type: "is-danger",
          message: "Date required."
        };
      }
      return {
        type: "is-primary",
        message: ""
      };
    },
    ...mapFields({
      privacyName: "user.user.privacy.name",
      privacyDescription: "user.user.privacy.description",
      privacyBirthday: "user.user.privacy.birthday",
      privacyLoaction: "user.user.privacy.location",
      privacyId: "user.user.privacy.id"
    })
  },
  methods: {
    ...mapActions(["toggleDevice"]),
    onSelectCity(value) {
      this.privacyLoaction = value;
    },
    decrease() {
      this.percent -= 17;
      if (this.percent <= 0) {
        this.percent = 0;
      }
    },
    increase() {
      this.percent += 13;
      if (this.percent >= 100) {
        this.percent = 100;
      }
    },
    handleBackgroundImage() {
      this.$refs.background.croppa.chooseFile();
    },
    handleAvatorImage(operation) {
      if (this.modal.name == "avator") {
        if (operation == "download") {
          this.$refs.avator.croppa.download(`avator`);
        } else if (operation == "remove") {
          this.$refs.avator.croppa.remove();
        }
      } else if (this.modal.name == "info") {
        if (operation == "download") {
          const { dispatch } = this.$store;
          const playload = {
            body: this.authentication.user.user.privacy,
            uri: `privacies/${this.privacyId}`
          };
          dispatch("authentication/update", playload);
        }
      }
      this.modalToggle("none");
    },
    alter(name, flag) {
      this.status.forEach(e => {
        if (e.name == name) {
          if (name == "background" && flag == true) {
            this.$refs.background.download(`background`);
          } else if (name == "background" && flag == false) {
            this.$refs.background.croppa.remove();
          }
          e.status = flag;
          e.focus = flag;
        }
      });
    },
    edit() {
      const { dispatch } = this.$store;
      dispatch("authentication/edit");
      this.status.forEach(e => {
        e.status = false;
        e.focus = false;
      });
    },
    shower() {
      console.log("显示");
    },
    isActive(item) {
      return this.menu.active === item.key;
    },
    select(item) {
      this.menu.active = item.key;
    },
    modalToggle(name) {
      if (name == "none") {
        this.modal.open = !this.modal.open;
      } else {
        this.modal.name = name;
        this.modal.open = !this.modal.open;
      }
    }
  }
};
</script>
<style lang="less" scoped>
@tablet: 992px;
@mobile: 768px;
.i-tablet-bg {
  display: block;
  @media (max-width: 600px) {
    display: none;
  }
}
.i-mobile-bg {
  display: none;
  @media (max-width: 600px) {
    display: block;
  }
}
/deep/ .ui.card.state {
  margin-top: 20px;
  box-shadow: none;
  border: none;
  background: none;
  text-align: left;
}
.ui.menu:not(.vertical) .item > .button {
  font-size: 14px;
  margin: 0;
  padding: 5px 16px;
}
.item.button.edit {
  background-color: #fff;
  border: 1px solid #66757f;
  color: #66757f;
  &,
  &:visited {
    border-radius: 100px;
    box-shadow: none;
    cursor: pointer;
    font-weight: bold;
    line-height: 20px;
    position: relative;
    text-align: center;
  }
  &:hover {
    background-color: #f5f8fa;
    color: #66757f;
  }
}
.profile-canopy.profile-canopy-size {
  @media (min-width: 1820px) {
    height: 500px;
  }
  @media (min-width: 1670px) {
    height: 460px;
  }
  @media (min-width: 1510px) {
    height: 420px;
  }
  @media (min-width: 1450px) {
    height: 380px;
  }
  @media (min-width: 1370px) {
    height: 360px;
  }
  @media (min-width: 1200px) {
    height: 320px;
  }
  @media (min-width: 1100px) {
    height: 400px;
  }
  height: 280px;
  margin: auto;
}
.profile-canopy {
  background-color: #59666c;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  position: relative;
  transition: height 0.3s;
  line-height: 1.375;
  & > .profile-canopy-inner {
    position: relative;
    width: 100%;
    z-index: 4;
    margin-top: 0px;
    height: 100%;
    & > .profile-canopy-navbar {
      & > .adaptive-bar .active.item {
        background-color: transparent;
        box-shadow: none;
        border-color: #2185d0;
        font-weight: 700;
        color: #2185d0;
        border-bottom-style: solid;
        border-radius: 0;
        transition: color 0.1s ease;
        margin: 0 0 -4px;
      }
    }
    & > .profile-canopy-header {
      background-color: #f2e0fd !important;
      max-width: 2560px;
      position: relative;
      z-index: 3;
      background-color: #1da1f2;
      transition: height 0.3s;
      height: 100%;
      & .profile-canopy-container {
        height: 100%;
        position: relative;
        margin: 0 auto;
        margin-left: 0 !important;
        margin-right: 0 !important;
        @media (min-width: @tablet) {
          margin-left: auto !important;
          margin-right: auto !important;
        }
        & .profile-canopy-card-info {
          margin-top: 9px;
          position: absolute;
          right: 0;
          .item.button.edit {
            background-color: #fff;
            border: 1px solid #66757f;
            color: #66757f;
            padding: 5px 16px;
            &,
            &:visited {
              border-radius: 100px;
              box-shadow: none;
              cursor: pointer;
              font-weight: bold;
              line-height: 20px;
              position: relative;
              text-align: center;
            }
          }
        }
        & .profile-canopy-avatar {
          bottom: -77px;
          left: 10px;
          position: absolute;
          transition: bottom 0.3s;
          z-index: 3;
          & .profile-canopy-image {
            height: 81.5px;
            width: 81.5px;
            border: 2px solid #fff;
            @media (min-width: @mobile) {
              height: 101.5px;
              width: 101.5px;
              border: 3px solid #fff;
            }
            @media (min-width: @tablet) {
              height: 137.5px;
              width: 137.5px;
              border: 4px solid #fff;
            }
            @media (min-width: 1200px) {
              height: 200px;
              width: 200px;
              border: 5px solid #fff;
            }
            background: #fff;
            border-radius: 50%;
            position: relative;
            outline: 0;
            display: block !important;
            & .profile-canopy-image-edit {
              position: absolute;
              top: 0;
              margin-left: 0em;
              height: 100%;
              float: right;
              margin-right: 0;
              margin-bottom: 1em;
              width: 100%;
              border-radius: 500rem;
              font-size: 0.78571429rem;
              overflow: hidden;
              vertical-align: middle;
              max-width: 100%;
              background-color: transparent;
              &:hover {
                cursor: pointer;
                box-shadow: 0 0 0 2px #ffffff,
                  0 0 2px 8px rgba(152, 28, 235, 0.4) inset;
                transition: box-shadow 0.15s ease-in-out,
                  -webkit-box-shadow 0.15s ease-in-out;
                opacity: 0.8;
                background-color: #ffffff3d;
              }
            }
          }
        }
      }
      & > .profile-canopy-bg {
        display: flex;
        flex-direction: column-reverse;
        justify-content: stretch;
        align-items: center;
        align-content: space-around;
        bottom: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        cursor: pointer;
        background-size: 100%;
        background-position: center;
        @media (max-width: 600px) {
          display: none;
        }
        & img {
          position: absolute;
          left: 0;
          right: 0;
          top: -9999px;
          bottom: -9999px;
          border-style: none;
          margin: auto 0;
          width: 100%;
        }
      }
      .profile-canopy-bg-hover {
        &:hover {
          box-shadow: 0 0 0 2px #ffffff,
            0 0 2px 5px rgba(152, 28, 235, 0.8) inset;
          transition: box-shadow 0.15s ease-in-out;

          opacity: 0.8;
        }
      }
    }
  }
}
.ui.attached.menu {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
}
.title-text {
  color: #fff;
  font-size: 27px;
  font-weight: bold;
  line-height: 32px;
  overflow: hidden;
  padding-left: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui.menu > .adaptive-bar {
  justify-content: space-around;
  @media (min-width: @tablet) {
    justify-content: normal;
  }
}
.ui.menu > .adaptive-bar {
  & > .item {
    padding: 0 0;
    @media (min-width: @tablet) {
      padding: 0.1em 2em;
    }
  }
  & .edit-tablet.item {
    display: none;
    @media (min-width: @tablet) {
      display: block;
    }
  }
  & .edit-mobile.item {
    padding-right: 1em;
    display: flex;
    @media (min-width: @tablet) {
      display: none;
    }
  }
}
.ui.menu > .adaptive-bar > .right.item {
  display: none;
  @media (min-width: @tablet) {
    display: flex;
  }
}
.layout-content {
  background-color: rgb(255, 255, 255);
  flex: auto;
  min-height: 0;
  margin: 0 auto;
  @media (max-width: 350px) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.profile {
  box-sizing: border-box;
  display: table;
  margin: 10px 0 0 0;
  min-width: 100%;
  padding: 0;
  table-layout: auto;
}
.profile-stats {
  table-layout: fixed;
}
.profile-card {
  width: 1%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  overflow: hidden;
  transition: all 0.15s ease-in-out;
}
.profile-arrange {
  vertical-align: bottom;
  display: table-cell;
  padding: 0;
  vertical-align: top;
}
.profile-canopy-card {
  & .ui.card {
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #d4d4d5;
    margin-bottom: 0px;
    cursor: pointer;
    &:active {
      box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px rgba(152, 28, 235, 0.4);
    }
    & > .content {
      background-size: 100%;
      height: 95px;
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      background-position: 0 50%;
      width: 100%;
      padding: 0;
      margin-top: -1px;

      & img {
        border-radius: 50%;
        height: 72px;
        width: 72px;
        border: 2px solid #fff;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: #fff;
        margin: -25px 8px 0 0;
      }
    }
  }
  & .ui.right.floated.image {
    background-color: #fff;
    border-radius: 50%;
    margin: -25px 0 0 8px;
    padding: 1px;
    vertical-align: bottom;
    float: left;
    max-width: 100%;
    &:active {
      box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px rgba(152, 28, 235, 0.4);
    }
  }
}
.personal {
  padding-top: 0;
  margin-top: 0;
  @media (min-width: @mobile) {
    padding-top: 5em;
    margin-top: 5px;
  }
}
.modal-search-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.modal-search-button {
  background: #f5dcf32e;
  margin-top: 5px;
  color: beige;
}
/deep/ .ui.dropdown .menu > .item {
  text-align: center;
}
/deep/ .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
  display: none;
}
/deep/ .ui.floated.image:last-child,
.ui.floated.images:last-child {
  &:hover {
    box-shadow: 0 0 0 2px #ffffff, 0 0 2px 5px rgba(152, 28, 235, 0.8) inset;
    transition: box-shadow 0.15s ease-in-out;
  }
}
/deep/ .ui.card.state.card-hover {
  &:hover {
    cursor: pointer;
    box-shadow: 0 0 0 2px #ffffff, 0 0 2px 8px rgba(152, 28, 235, 0.4) inset;
    transition: box-shadow 0.15s ease-in-out,
      -webkit-box-shadow 0.15s ease-in-out;
    opacity: 0.8;
    background-color: #ffffff3d;
  }
}
.state-edit {
  margin-bottom: 40px;
  z-index: 10;
  padding: 0;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 40%;
  transition: color 0.6s ease, transform 0.2s ease;
  color: #ffffff;
  &:hover {
    transform: scale(1.5);
    color: rgba(152, 28, 235, 0.4);
  }
}
/deep/.popover-origin.direction-bottom.align-center {
  top: 100%;
}
/deep/.popover-origin.direction-bottom {
  top: unset;
  bottom: 100%;
}
/deep/
  .popover-origin
  .popover-content-wrapper
  .popover-content.align-left:after {
  transform: translateY(-50%) translateX(-50%) rotate(135deg);
  top: unset;
}
/deep/ .ui.dropdown .menu > .item {
  text-align: unset;
}
</style>
